<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
<meta charset="UTF-8" />
<title>列表页</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://layui.hcwl520.com.cn/layui-v2.4.5/css/layui.css?v=201811010202" rel="stylesheet"></link>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>列表页</legend>
	</fieldset>
	<table class="layui-hide" id="commnetTable"  lay-filter="commnet"></table>
	<input name="rId" id="rId"  type="hidden" th:value="${rId}">
	<script type="text/html" id="barDemo">
 		 <button class="layui-btn layui-btn-xs " lay-event="edit">编辑</button>
 		 <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
	</script>
	<script type="text/html" id="indexTpl">
   		 {{d.LAY_TABLE_INDEX+1}}
	</script>
	<script type="text/html" id="imgTpl">
		<img src="{{ d.headImg }}">
	</script>
</body>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/jquery/jquery-3.3.1.min.js?v=201804251754"></script>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/layui-v2.4.5/layui.all.js?v=201811010202"></script>
<script>
layui.use(['laypage', 'layer', 'table',], function(){
	  table = layui.table //表格
	  table.render({
	    elem: '#commnetTable'
	    ,url: 'commentList?rId='+$("#rId").val() //数据接口
	    ,title: '留言列表'
	    //,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
	    ,cols: [[ //表头
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'序号',fixed: 'left',width:80, unresize: true, sort: true, templet: '#indexTpl' }
	      ,{field: 'nickName', title: '昵称', fixed: 'left',width:100}
	      ,{field: 'headImg',title:'头像',templet:imgTpl,width:120}
	      ,{field: 'content', title: '评论内容' ,width:180}
	      ,{field: 'likeNum', title: '点赞',width:60}
	      ,{field: 'createAt', title: '发表时间',  sort: true,width:180}
	      ,{field: 'replyContent', title: '回复内容',width:180}
	      ,{field: 'replyLikeNum', title: '回赞',width:60}
	      ,{field: 'isShow', title: '显示',width:80,templet: function(row) {
              if (row.isShow == 0) {
                  return "<span class='layui-badge-dot layui-bg-gray'>未显示</span>"
              } else if (row.isShow == 1) {
                  return "<span class='layui-badge layui-bg-blue' >已显示</span>"
              }    
          }}
	      ,{field: 'isTop', title: '置顶',width:80,templet: function(row) {
              if (row.isTop == 0) {
            	  return "<span class='layui-badge-dot layui-bg-gray'>未置顶</span>"
              } else if (row.isTop == 1) {
            	  return "<span class='layui-badge-dot layui-bg-gray'>已置顶</span>"
              }
          }}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	 	 ,even: true //隔行背景
	 	 ,page: true
	    ,response: {
	      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
	    }
	    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
	      return {
	    	 "code": '200',
	        "count": res.totalElements, //解析数据长度
	        "data":res.content
	      };
	  	}
	  });
	  //监听行工具事件
	  table.on('tool(commnet)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        layer.close(index);
	        //向服务端发送删除指令
	        $.ajax({
	               type: "POST",
	               url: "delCommnet",
	               data: {
	            	   'id':data.id
	               },
	               cache: false,
	               success: function(){
	            	   layer.msg('删除成功');
	            	   window.location.reload();
	               }
	           });
	        
	      });
	    } else if(layEvent === 'edit'){
	    	layer.open({
	            type: 2 //此处以iframe举例
	            ,title: '修改'
	            ,area: ['800px', '400px']
	            ,shade: 0.8
	            ,maxmin: true
	            ,content: 'toUpdateCommnet?id='+data.id
	            ,btn: ['修改', '关闭'] //只是为了演示
	        	,yes : function(index, layero) { // 保存按钮回调函数
					var body = layer.getChildFrame('body', index);
					body.find('#articleCommentSubmint').click();
				}
				,btn2 : function(index, layero) { // 取消按钮回调函数
					layer.close(index); // 关闭弹出层
					}
				,end: function () {
                    window.location.reload();
                }
	          });
	    }
	  });
});
</script>
</html>

